<template>
  <div>
    <banner :sighName="sighName" :bannerImg="bannerImg" :bannerImgs="gallaryImgs"/>
    <list :list="list"/>
    <div class="container"></div>
  </div>
</template>
<script>
  import axios from 'axios'
  import Banner from './components/Banner'
  import List from './components/List'
  export default {
    name: 'Detail',
    components: {
      Banner,
      List
    },
    data() {
      return {
        sighName: '',
        bannerImg: '',
        gallaryImgs: [],
        list: []
      }
    },
    methods: {
      getDetailInfo() {
        axios.get('api/detail.json', {
          params: {
            id: this.$route.params.id
          }
        }).then(this.handleGetDetailSucc)
      },
      handleGetDetailSucc(res) {
        res = res.data
        if(res.ret && res.data) {
          const data = res.data
          this.sighName = data.sightName
          this.bannerImg = data.bannerImg
          this.gallaryImgs = data.gallaryImgs
          this.list = data.categoryList
        }
      }
    },
    mounted() {
      this.getDetailInfo()
    }
  }
</script>

<style scoped lang="stylus">
  .container
    height: 60rem
</style>
